{% extends "base.html" %}

{% block style %}
<style>
  body{
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #efefef;
  }
  .login-content{
    width: 400px;
    border: 1px solid rgba(0, 0, 0, .4);
    border-radius: 5px;
    background-color: #ffffff;
  }
  .login-content .login-form-item{
    padding: 15px 15px 0 15px;
  }
  .login-content .login-form-item:last-child{
    padding-bottom: 15px;
  }
  .login-content .login-form-item label{
    display: block;
    width: 100%;
  }
</style>
{% endblock %}

{% block body %}
<div class="login-content">
  <form action="/log-in" method="POST">
      <div class="login-form-item">
        <label for="u">
          <span>用户名:</span>
          <input type="text" name="u" value="" class="form-control" />
        </label>
      </div>
      <div class="login-form-item">
        <label for="p">
          <span>密码:</span>
          <input type="password" name="p" value="" class="form-control" />
        </label>
      </div>
      <div class="login-form-item">
        <input type="submit" value="登陆" class="btn btn-primary btn-block" />
      </div>
  </form>
</div>
{% endblock %}

{% block script %}
<script type="text/javascript"></script>
{% endblock %}
